import { Store } from "../../core";

import StoreProps from "./StoreProps";
import useZoom from "./useZoom";
import ZoomInButton from "./ZoomInButton";
import { increase } from "./zoomingLevel";
import { FC, ReactElement } from "react";

export interface RenderZoomInProps {
  onClick: () => void;
}

type RenderZoomIn = (props: RenderZoomInProps) => ReactElement;

export interface ZoomInProps {
  children?: RenderZoomIn;
}

const ZoomIn: FC<{
  children?: RenderZoomIn;
  store: Store<StoreProps>;
}> = ({ children, store }) => {
  const { scale } = useZoom(store);

  const zoomIn = () => {
    const zoom = store.get("zoom");
    if (zoom) {
      const newLevel = increase(scale);
      zoom(newLevel);
    }
  };

  const defaultChildren = (props: RenderZoomInProps) => (
    <ZoomInButton onClick={props.onClick} />
  );
  const render = children || defaultChildren;

  return render({
    onClick: zoomIn,
  });
};

export default ZoomIn;
